<template>
  <div>
    <v-layout class="px-3 pb-2">
        <v-flex xs2>
          <v-btn color="primary" @click="addBrand">新增品牌</v-btn>
        </v-flex>
        <v-spacer />
        <v-flex xs4>
            <v-text-field label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>
        </v-flex>
    </v-layout>
    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td  class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center"><img :src="props.item.image" alt=""/></td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="text-xs-center">
          <v-btn flat icon color="info"  @click="editBrand(props.item)">
              <v-icon>edit</v-icon>
          </v-btn>
          <v-btn flat icon color="error" @click="deleteBrand(props.item)">
            <v-icon>delete</v-icon>
          </v-btn>
        </td>
      </template>
    </v-data-table>
    <v-dialog v-model="show" max-width="600" scrollable v-if="show">
      <v-card>
        <v-toolbar dark dense color="primary">
          <v-toolbar-title>{{isEdit ? '修改品牌' : '新增品牌'}}</v-toolbar-title>
          <v-spacer/>
          <v-btn icon @click="show = false">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <v-card-text class="px-5 py-2">
          <!-- 表单 -->
          <brand-form :oldBrand="brand" :isEdit="isEdit" @close="show = false" :reload="getDataFromApi"/>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>

  import BrandForm from './BrandForm';

    export default {
        name: "MyBrand",
      components: {
        BrandForm
      },
      data(){
          return{
            //定义表格的头部
            headers:[
              {text: '品牌id',value:"id",align: 'center',sortable: true },
              {text: '品牌名称',value:"name",align: 'center',sortable: false },
              {text: '品牌LOGO',value:"image",align: 'center',sortable: false },
              {text: '品牌首字母',value:"letter",align: 'center',sortable: true },
              {text: '操作',align: 'center',sortable: false }
            ],

            //定义表格中的数据
            brands:[],
            //分页相关的
            pagination:[],
            //总条数
            totalBrands:0,
            //加载数据的样式
            loading: false,
            key: "",//查询的搜索条件
            show :false,//是否弹出 新增品牌的页面。
            isEdit: false,
            brand: {}
          }
      },

      created(){
          //去后台查询
        this.loadBrands();
      },
      watch: {
          key(){
            this.pagination.page =1;
            this.loadBrands();
          },
          pagination:{
            deep:true,
            handler(){
              this.loadBrands();
            }
          }
      },
      methods:{
          //弹出新增品牌页面
        addBrand(){
          this.show = true;
        },
        loadBrands(){
          this.loading = true;
          this.$http.get("/item/brand/page",{
            params:{
              page:this.pagination.page,  //当前页
              rows:this.pagination.rowsPerPage, //每页大小
              sortBy:this.pagination.sortBy,//排序字段
              desc:this.pagination.descending,//是否降序
              key: this.key //查询添加
            }
          }).then(resp =>{
              this.brands = resp.data.items;
              this.totalBrands = resp.data.total;
              this.loading = false;
          })
        },
        editBrand(item) {
          this.brand = item;
          this.isEdit = true;
          this.show = true;

          // 查询商品分类信息，进行回显
          this.$http.get("/item/brand/bid/" + item.id)
            .then(resp => {
              this.brand.categories = resp.data;
            })

        },
        deleteBrand(item) {
          this.$message.confirm('此操作将永久删除该品牌, 是否继续?').then(() => {
            // 发起删除请求
            this.$http.delete("/item/brand/" + item.id,)
              .then(() => {
                // 删除成功，重新加载数据
                this.$message.success("删除成功！");
                this.loadBrands();
              })
          }).catch(() => {
            this.$message.info("删除已取消！");
          });

        },
        getDataFromApi() {
          this.loading = true;
          // 200ms后返回假数据
          window.setTimeout(() => {
            this.items = brandData.slice(0,4);
            this.totalItems = 100
            this.loading = false;
          }, 200)
        }
      }

    }
</script>

<style scoped>

</style>
